<template>
  <b-card header="组套" >

    <div slot="header">
      <strong>{{this.type===0?'检查组套':'检验组套'}}</strong>
      <div class="card-header-actions">
        <b-button-group class="pull-right" >
          <b-button @click="deleteGroupExamination" variant="danger"  size="sm" >删除</b-button>
          <b-button @click="checkGroupExamination" variant="primary"  size="sm" >查看</b-button>
        </b-button-group>
      </div>
    </div>

    <b-tabs @input="changeTab">
      <!-- changeTab更换tab 个人/科室挂号列表 -->
      <b-tab v-for="(tab, index) in groupExaminationTabs" :title="tab.title" :key="index" :active="index === currentTab" >
        <!-- 分别存放tab的内容-->
        <b-row>
          <b-col sm="8" class="my-1">
            <b-input-group>
              <b-form-input
                v-model="filter"
                placeholder="请输入..."
                size="sm"
              ></b-form-input>
              <b-input-group-append>
                <b-button
                  :disabled="!filter"
                  @click="filter = ''"
                  size="sm"
                >清空</b-button>
              </b-input-group-append>
            </b-input-group>
          </b-col>
          <b-col sm="4" class="my-1">
            <b-form-select
              v-model="perPage"
              :options="pageOptions"
              size="sm"
            ></b-form-select>
          </b-col>
        </b-row>
        <br>
        <!-- Main table element -->
        <b-table
          show-empty
          selectable
          select-mode="single"
          hover
          :aria-busy="isBusy"
          :items="groupExaminationList"
          :fields="groupExaminationFields"
          :current-page="currentPage"
          :per-page="perPage"
          :filter="filter"
          :sort-by.sync="sortBy"
          :sort-desc.sync="sortDesc"
          :sort-direction="sortDirection"
          @filtered="onFiltered"
          @row-selected="selectGroupExamination"
        >
          <template slot="doctorId" slot-scope="row">
            {{transformDoctor(row.item)}}
          </template>
        </b-table>
        <!--页码-->
        <b-row>
          <b-col md="12" class="my-1">
            <b-pagination
              v-model="currentPage"
              :total-rows="total"
              :per-page="perPage"
              class="my-0"
              size="sm"
              align="center"
            ></b-pagination>
          </b-col>
        </b-row>

      </b-tab>
      <!-- 弹框-->
      <b-modal  ref="group-examination-modal" size="lg" centered title="组套详情" okTitle="引用"
                cancelTitle="取消" @ok="onCite">
        <group-examination-info
          :group-examination-info-item="groupExaminationInfoItem">

        </group-examination-info>
      </b-modal>
    </b-tabs>
  </b-card>
</template>

<script>
  import {mapState} from 'vuex';
  import GroupExaminationInfo from "./groupExaminationInfo";
    export default {
      name: "groupExamination",
      components: {GroupExaminationInfo},
      props:{
        type:{//0为检查 1为检验
          type:Number,
          default:()=>{return 0}
        }
      },
      data(){
        return {
          isBusy: false,
          groupExaminationList:[],
          total:1,
          perPage:5,
          pageOptions: [5, 10, 15],
          sortBy: null,
          sortDesc: false,
          sortDirection: 'asc',
          filter: null,
          currentPage:1,
          currentTab:0,
          groupExaminationInfoItem:{},//病历组套信息
          groupExaminationTabs:[{//api
            title:"个人",
            getGroupExaminationApi:"/doctor/examination/listGroupExamination",
            getGroupExaminationParams:{scope:'1'},
            deleteGroupExaminationApi:"/doctor/examination/deleteGroupExamination",
            deleteGroupExaminationParams:{},
          },{
            title:"科室",
            getGroupExaminationApi:"/doctor/examination/listGroupExamination",
            getGroupExaminationParams:{scope:'2'},
            deleteGroupExaminationApi:"/doctor/examination/deleteGroupExamination",
            deleteGroupExaminationParams:{},
          },{
            title:"全院",
            getGroupExaminationApi:"/doctor/examination/listGroupExamination",
            getGroupExaminationParams:{scope:'3'},
            deleteGroupExaminationApi:"/doctor/examination/deleteGroupExamination",
            deleteGroupExaminationParams:{},
          }
          ],
          groupExaminationFields: [
            {key: 'groupExaminationCode', label: '组套编号', sortable: true},
            {key: 'groupExaminationName', label: '组套名称', sortable: true},
            {key: 'doctorId', label: '创建者', sortable: true},
          ],
        }
      },
      mounted: async function(){//挂载之后才开始填充数据
        await this.getGroupExaminationList();
        console.log("await this.getGroupExaminationList");
      },
      computed:{
        ...mapState("common",['curr_user']),
      },
      methods:{
        transformDoctor(item){
          if(item.doctorId===this.curr_user.userId){
            return "自己";
          }else{
            return "其他";
          }
        },
        selectGroupExamination(item) {//选中一个组套
          if (item.length === 0) {
            this.groupExaminationInfoItem = {};
          } else {
            this.groupExaminationInfoItem = Object.assign({}, item[0]);
          }
        },
        deleteGroupExamination(){//删除检查检验组套
          if(JSON.stringify(this.groupExaminationInfoItem)=="{}"){
            alert("请先选择组套");
          }else{
            if(this.groupExaminationInfoItem.doctorId===this.curr_user.userId){
              this.groupExaminationTabs[this.currentTab].deleteGroupExaminationParams.groupExaminationId = this.groupExaminationInfoItem.groupExaminationId;
              this.$get(this.groupExaminationTabs[this.currentTab].deleteGroupExaminationApi,this.groupExaminationTabs[this.currentTab].deleteGroupExaminationParams).then(res=>{
                console.log(res);
                if(res.status === "OK"){
                  alert(res.msg);
                  this.getGroupExaminationList();
                }else{
                  alert(res.msg);
                }
              });
            }else{
              alert("您不能删除其他人创建的组套");
            }
          }
        },
        checkGroupExamination(){
          if(JSON.stringify(this.groupExaminationInfoItem)=="{}"){
            alert("请先选择组套");
          }else{
            this.$refs["group-examination-modal"].show();
          }
        },
        async changeTab(index){
          this.currentTab = index;
          this.currentPage = 1;
          await this.getGroupExaminationList();
        },
        onCite(){
          alert("现在在引用组套");
          this.$emit("onCite",this.groupExaminationInfoItem);
        },
        onFiltered(filteredItems) {
          // Trigger pagination to update the number of buttons/pages due to filtering
          this.total = filteredItems.length;
          this.currentPage = 1;
        },
        getGroupExaminationList(){
          this.groupExaminationTabs[this.currentTab].getGroupExaminationParams.type=this.type+1;
          this.groupExaminationTabs[this.currentTab].getGroupExaminationParams.userId=this.curr_user.userId;
          this.$get(this.groupExaminationTabs[this.currentTab].getGroupExaminationApi, this.groupExaminationTabs[this.currentTab].getGroupExaminationParams).then(res=>{
            console.log(res);
            if(res.status === 'OK'){
              this.groupExaminationList = res.data;
              console.log("我请求组套数据了");
              console.log(this.groupExaminationList);
              console.log("打印结束");
              this.total = this.groupExaminationList.length;
              this.isBusy = false;
            }else{
              console.log("加载失败");
            }
          });
        },
      }
    }
</script>

<style scoped>

</style>
